<template>
    <div class="dashboard">
      <el-container>
        <el-main class="main-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>API总数</span>
                </div>
                <div class="card-content">
                  <h2>120</h2>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>活跃API</span>
                </div>
                <div class="card-content">
                  <h2>80</h2>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>故障API</span>
                </div>
                <div class="card-content">
                  <h2>5</h2>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-card class="notification-card">
            <div slot="header" class="clearfix">
              <span>站内通知</span>
            </div>
            <el-collapse v-model="activeNames">
              <el-collapse-item v-for="(notification, index) in notifications" :key="index" :title="notification.title" :name="index">
                <div>{{ notification.content }}</div>
              </el-collapse-item>
            </el-collapse>
          </el-card>
          <el-card class="issue-card">
            <div slot="header" class="clearfix">
              <span>Issue列表</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(issue, index) in issues" :key="index">
                <el-card :class="['issue-item', `issue-${issue.status}`]">
                  <div slot="header" class="clearfix">
                    <span>{{ issue.title }}</span>
                    <el-tag :type="issue.status">{{ issue.status }}</el-tag>
                  </div>
                  <div class="issue-content">
                    <p>{{ issue.description }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Dashboard',
    data() {
      return {
        activeNames: ['0'],
        notifications: [
          { title: '系统更新通知', content: '系统将于今晚22:00至次日2:00进行更新，届时将无法访问，请提前做好准备。' },
          { title: '新功能上线', content: '我们新增了API监控功能，欢迎大家体验。' },
          // 更多通知数据
        ],
        issues: [
          { title: '紧急问题A', status: '紧急', description: '这是一个紧急问题A的描述' },
          { title: '一般问题B', status: '一般', description: '这是一个一般问题B的描述' },
          { title: '重要问题C', status: '重要', description: '这是一个重要问题C的描述' },
          // 更多issue数据
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .dashboard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    color: #2c3e50;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .card-content {
    text-align: center;
  }
  
  .notification-card, .issue-card {
    margin-top: 20px;
  }
  
  .issue-item {
    margin-bottom: 20px;
  }
  
  .issue-item .el-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .issue-紧急 .el-tag {
    background-color: #f56c6c;
    color: white;
  }
  
  .issue-重要 .el-tag {
    background-color: #e6a23c;
    color: white;
  }
  
  .issue-一般 .el-tag {
    background-color: #67c23a;
    color: white;
  }
  </style>
  